<template>
	<view class="item_con bg-color-item mb-8" @click="$emit('click')" v-if="item.collection">
		<view class="img_con">
			<w-image :src="item.collection.listimg" width="164" height="164" radius="10" mode="aspectFill"></w-image>
			<!-- <view class="badge" v-if="item.can_compound==1 && types != 4">{{handleLang('可合成')}}</view>
			<view class="badge" v-if="item.user_collection && item.user_collection.status === 10 && types == 4">{{handleLang('赠送中')}}</view>
			<view class="badge" v-else-if="item.user_collection && item.user_collection.status !== 10 && types == 4">{{handleLang('已赠送')}}</view>
			<view class="level" v-if="item.collection.collection_level && types != 4">
				<view class="level-bg">
					{{ item.collection.collection_level }}
				</view> 
			</view> -->
		</view>
		<view class="info">  
			<view class="t1 text-overflow-1">{{ item.collection.name }}</view>
			<view class="flex-center-sb" v-if="types!=3 && types!=4">
				<text class="font-size-10 font-color-999">{{ handleLang(getNum()) }}</text>
			<!-- 	<view @click.stop="setCollect">
					<w-icon :name="item.is_collection==0?'no-like-black':'has-like'" size="16"></w-icon>
				</view> -->
			</view>
			
			<view class="flex-center-sb" v-else>
				<view>
					<text class="font-size-10 font-color-minor" v-if="item.user_collection.collection_code">#{{ item.user_collection.collection_code }}</text>
				</view>
				<view class="price">{{ item.price || item.total_price }}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { isCollect } from '@/api/collection/index.js';
	export default {
		props:{
			//1盲盒 2藏品 3已售出
			types:{
				type:String | Number
			},
			item:{
				type: Object,
				default: ()=>{
					return {
						collection:{}
					}
				}
			},
			searchKey:{
				type: String,
				default: '禅'
			}
		},
		data() {
			return {
				
			};
		},
		methods:{
			
			// 分割名字
			splitName(e) {
				return e.split('')
			},
			
			// 获取数量
			getNum() {
				let { lock_num,num,sell_num } = this.item;
				switch(true){
					case !!lock_num && !!sell_num:
					case !!lock_num:
						return `共${num}个，锁定中${lock_num}个`
						break;
					case !!sell_num:
						let text = sell_num==0?'':`，寄售${sell_num}个`
						// return `共${num}个${text}`
						return `持有${num}`
						break;
					case !sell_num && !lock_num:
						return `共1${num}个`
						break;
				}
			},
			
			setCollect() {
				let { is_collection,collection } = this.item;
				let type = is_collection; // 0添加收藏 1移除收藏
				isCollect(type,{id:collection.id,types:this.types}).then((res)=>{
					uni.$u.toast(res.msg);
					is_collection==1?this.item.is_collection=0:this.item.is_collection=1;
				}).catch(()=>{})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.item_con{
		width: 49.5%;
		border-radius: 24rpx;
		overflow: hidden;
		background-color: #fff;
		// box-shadow: 0px -2px 28px 0px rgba(0,0,0,0.06);
		
		>.img_con{
			width: 328rpx;
			height: 328rpx;
			position: relative;
			
			>.badge{
				padding: 8rpx 24rpx;
				background: linear-gradient( 90deg, #FF7F43 0%, #FF2D23 100%);
				border-radius: 10px 0px 10px 0px;
				position: absolute;
				left: 0;
				top: 0;
				font-size: 22rpx;
				color: rgba(255,255,255,.7);
			}
			.level{
				width: 312rpx;
				position: absolute;
				height: 36rpx;
				top: 0rpx;
				left: 0rpx;
				@extend .flex,.flex-js-center;
				&-bg{
					width: 172rpx;
					height: 36rpx;
					// background-color: rgba(223, 0, 7,.4);
					background: $theme-jb-color;
					backdrop-filter: blur(5px);
					border-radius: 0 0 12rpx 12rpx;
					@extend .font-size-10,.font-color-white,.flex,.flex-center;
				}
			}
		}
		>.info{
			width: 100%;
			height: 130rpx;
			@extend .flex,.flex-dir-col,.flex-js-center,.plr-10;
			
			>.t1{
				width: 100%;
				font-weight: bold;
				@extend .font-size-16,.mb-4;
			}
			.price{
				font-size: 32rpx;
				@extend .font-color-price;
				font-weight: 500;
				&::before{
					content: '￥';
					font-size: 22rpx;
					font-weight: 500;
				}
			}
		}
	}
</style>
